<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="广州旅游实用工具，提供天气查询、地铁拥堵信息和多语言急救短语">
    <title>实用工具 - 广州旅游指南</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        /* 工具页面特有样式 */
        .tool-section {
            padding: 60px 0;
        }
        
        .tool-section h2 {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2rem;
            color: #0066cc;
        }
        
        .tool-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .tool-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            padding: 30px;
            transition: transform 0.3s;
        }
        
        .tool-card:hover {
            transform: translateY(-5px);
        }
        
        .tool-card h3 {
            color: #0066cc;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .tool-card i {
            font-size: 1.5rem;
        }
        
        .weather-form, .subway-form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        input, select, button {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: inherit;
        }
        
        button {
            background: #0066cc;
            color: white;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #0055aa;
        }
        
        .result-container {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        
        .phrase-category {
            margin-bottom: 20px;
        }
        
        .phrase-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #ddd;
        }
        
        .phrase-item h4 {
            margin-bottom: 8px;
            color: #333;
        }
        
        .phrase-item p {
            margin-bottom: 5px;
            color: #666;
        }
        
        .play-btn {
            background: none;
            border: none;
            color: #0066cc;
            padding: 0;
            margin-top: 5px;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .weather-form, .subway-form {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>广州旅游指南</h1>
            <nav>
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="overview.html">简介</a></li>
                    <li><a href="attractions.html">景点</a></li>
                    <li><a href="tools.html">工具</a></li>
                    <li><a href="faq.html">游客问答</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 天气查询工具 -->
    <section class="tool-section">
        <div class="container">
            <h2><i class="fas fa-cloud-sun"></i> 天气查询</h2>
            <div class="tool-container">
                <div class="tool-card">
                    <h3><i class="fas fa-search-location"></i> 广州实时天气</h3>
                    <div class="weather-form">
                        <input type="text" id="city-input" placeholder="输入城市名称" value="广州">
                        <button id="search-weather">查询</button>
                    </div>
                    <div class="result-container" id="weather-result">
                        <p>请输入城市名称查询天气信息</p>
                    </div>
                </div>
                
                <div class="tool-card">
                    <h3><i class="fas fa-calendar-week"></i> 天气预报</h3>
                    <div id="forecast-result">
                        <p>查询后将显示未来3天天气预报</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 地铁拥堵信息 -->
    <!-- 实用链接部分 -->
<section class="tool-section" style="background: #f8f9fa;">
    <div class="container">
        <h2><i class="fas fa-external-link-alt"></i> 实用链接</h2>
        <div class="tool-container">
            <div class="tool-card">
                <h3><i class="fas fa-ticket-alt"></i> 广州本地宝</h3>
                <p>广州本地宝是提供广州本地生活服务、政务资讯及文化活动信息的综合平台</p>
                <a href="https://gz.bendibao.com/" target="_blank" class="btn" style="margin-top: 15px; display: inline-block;">
                    访问广州本地宝官网 <i class="fas fa-external-link-alt"></i>
                </a>
            </div>
            <div class="tool-card">
                <h3><i class="fas fa-subway"></i> 广州地铁官网</h3>
                <p>获取广州地铁最新线路图、票价信息和运营时间。</p>
                <a href="http://www.gzmtr.com" target="_blank" class="btn" style="margin-top: 15px; display: inline-block;">
                    访问地铁官网 <i class="fas fa-external-link-alt"></i>
                </a>
            </div>
        </div>
    </div>
</section>

    <!-- 急救短语生成器 -->
    <section class="tool-section">
        <div class="container">
            <h2><i class="fas fa-first-aid"></i> 急救短语生成器</h2>
            <div class="tool-card">
                <h3><i class="fas fa-language"></i> 多语言急救短语</h3>
                
                <div class="phrase-category">
                    <h4>医疗求助</h4>
                    <div class="phrase-item">
                        <h4>我需要医生</h4>
                        <p><strong>粤语:</strong> 我需要医生 (ngo5 seoi1 jiu3 ji1 sang1)</p>
                        <p><strong>英语:</strong> I need a doctor</p>
                    </div>
                    <div class="phrase-item">
                        <h4>我过敏</h4>
                        <p><strong>粤语:</strong> 我过敏 (ngo5 gwo3 man5)</p>
                        <p><strong>英语:</strong> I have an allergy</p>
                    </div>
                </div>
                
                <div class="phrase-category">
                    <h4>受伤</h4>
                    <div class="phrase-item">
                        <h4>我受伤了</h4>
                        <p><strong>粤语:</strong> 我受伤了 (ngo5 sau6 soeng1 liu5)</p>
                        <p><strong>英语:</strong> I'm injured</p>
                    </div>
                </div>
                
                <div class="phrase-category">
                    <h4>报警</h4>
                    <div class="phrase-item">
                        <h4>请帮我报警</h4>
                        <p><strong>粤语:</strong> 唔该帮我报警 (m4 goi1 bong1 ngo5 bou3 ging2)</p>
                        <p><strong>英语:</strong> Please call the police for me</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>提供最新最全的广州旅游资讯，帮助游客更好地探索这座美丽的城市。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="../index.html">首页</a></li>
                        <li><a href="overview.html">简介</a></li>
                        <li><a href="attractions.html">景点推荐</a></li>
                        <li><a href="faq.html">游客问答</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-envelope"></i> contact@guangzhoutravel.com</p>
                    <p><i class="fas fa-phone"></i> +86 20 1234 5678</p>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2024 广州旅游指南. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 这里可以添加工具功能的JavaScript代码
        document.getElementById('search-weather').addEventListener('click', function() {
            const city = document.getElementById('city-input').value || '广州';
            document.getElementById('weather-result').innerHTML = `
                <h4>${city}天气</h4>
                <p><i class="fas fa-temperature-high"></i> 温度: 25°C</p>
                <p><i class="fas fa-tint"></i> 湿度: 65%</p>
                <p><i class="fas fa-wind"></i> 风力: 东南风 3级</p>
                <p><i class="fas fa-cloud"></i> 天气状况: 多云</p>
            `;
            
            document.getElementById('forecast-result').innerHTML = `
                <h4>${city}未来3天预报</h4>
                <p><strong>明天:</strong> 多云转晴, 24-28°C</p>
                <p><strong>后天:</strong> 晴天, 25-30°C</p>
                <p><strong>大后天:</strong> 局部阵雨, 23-27°C</p>
            `;
        });
        
        document.getElementById('search-subway').addEventListener('click', function() {
            const line = document.getElementById('line-select').value;
            let content = '';
            
            if(line === 'all') {
                content = `
                    <h4>广州地铁高峰时段</h4>
                    <p><strong>工作日:</strong> 7:30-9:30, 17:30-19:30</p>
                    <p><strong>周末:</strong> 10:00-12:00, 16:00-18:00</p>
                    <p><strong>最拥堵线路:</strong> 3号线(体育西路站附近)</p>
                `;
            } else {
                content = `
                    <h4>广州地铁${line}号线高峰时段</h4>
                    <p><strong>工作日早高峰:</strong> 7:30-9:30</p>
                    <p><strong>工作日晚高峰:</strong> 17:30-19:30</p>
                    <p><strong>最拥堵站点:</strong> ${getBusyStation(line)}</p>
                `;
            }
            
            document.getElementById('subway-result').innerHTML = content;
        });
        
        function getBusyStation(line) {
            const stations = {
                '1': '体育中心站',
                '2': '广州南站',
                '3': '体育西路站',
                '5': '珠江新城站'
            };
            return stations[line] || '多个站点';
        }
        
        // 播放语音功能
        document.querySelectorAll('.play-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                alert('语音播放功能需要浏览器支持Web Speech API');
            });
        });
    </script>
</body>
</html>